<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	
    <head th:include="/common/header :: source"></head>
	<body>
	<div th:include="/common/header :: header"></div>
	
    <!-- 底部表格 -->
	<div  align="center">
		<div class="panel panel-default" style="width:800px;" align="left">
	      <div class="panel-heading">
	        <h3 class="panel-title">添加商品</h3>
	      </div>
	      <div class="panel-body">
	        <form>
				<div class="form-group">
				  <label>代码生成路径</label>
				  <input type="text" style="width:400px;" class="form-control" name="codePath" placeholder="D:\generCode\Student">
				</div>
				<div class="form-group">
					<label>包名路径</label>
					<input type="text" style="width:400px;" class="form-control" name="packageName" placeholder="com.topxfun.ag">
				</div>
				<div class="form-group">
					<label>类名称</label>
					<input type="text" style="width:400px;" class="form-control" name="className" placeholder="大写全名">
				</div>
				<div class="form-group" id="attribute">
					<label>属性名称：</label>
					<input type="text" style="width:400px;" class="form-control" name="attName" placeholder="请用驼峰命名法">
				</div>
				<button type="button" style="width:100px;" id="addAttribute" class="btn btn-default">添加属性</button>
				<button type="button" style="width:100px;" id="generaCode" class="btn btn-success">保存</button>
			</form>
	      </div>
	    </div>
	</div>
	</body>
	<script type="text/javascript">
	/**
	 * 登录首界面
	 */
	$(function(){

	    //动态追加属性
		$("#addAttribute").click(function () {
		    var html = '<div class="form-group" id="attribute">'
				+'<label>属性名称：</label>'
				+'<div style="flex-direction: row "><input type="text" style="width:400px;display: initial;" class="form-control" name="attName" placeholder="请用驼峰命名法"><img src="../admin/images/del.ico" style="width: 40px;height: 40px;cursor: pointer;" onclick="deleteAttr(this)"/></div>'
				+'<i class="icon-map-marker"></i>'
				+'</div>';
		    var attributes = $("div[id='attribute']");
		    if(attributes.length>1){
                $("#attribute").siblings("div:last").after(html);
            }else{
                $("#attribute").after(html);
            }
        })
        document.onkeydown = function(e){
            var html = '<div class="form-group" id="attribute">'
                +'<label>属性名称：</label>'
                +'<div style="flex-direction: row "><input type="text" style="width:400px;display: initial;" class="form-control" name="attName" placeholder="请用驼峰命名法"><img src="../admin/images/del.ico" style="width: 40px;height: 40px;cursor: pointer;" onclick="deleteAttr(this)"/></div>'
                +'<i class="icon-map-marker"></i>'
                +'</div>';
            var ev = document.all ? window.event : e;
            if(ev.keyCode==13) {
                var attributes = $("div[id='attribute']");
                if(attributes.length>1){
                    $("#attribute").siblings("div:last").after(html);
                }else{
                    $("#attribute").after(html);
                }
            }
        }
		//表单提交数据生成代码
		$("#generaCode").click(function () {
		    //获取表单下的所有属性值
            var attNames = [];
            var attNameInp = $("input[name='attName']");
            if(attNameInp.length == 0){
                layer.msg('请添加属性', {icon: 2});
                return;
            }
            for(var i=0;i<attNameInp.length;i++){
                var attNameValue = {};
                attNameValue['attName'] = attNameInp[i].value;
                attNames[i] = attNameValue;
            }
            var codePath = $("input[name=codePath]").val();
            var packageName = $("input[name=packageName]").val();
            var className = $("input[name=className]").val();
            layer.confirm('确定生成相关代码？', {
                btn: ['取消','确定']
            }, function(){
                layer.msg('请继续操作', {icon: 6});
            }, function(){
                $.ajax({
                    type: 'post',
                    dataType: 'json',
                    url: basePath + '/code/genercode',
                    data: {
                        codePath : codePath,
                        packageName : packageName,
                        className : className,
                        attributes : JSON.stringify(attNames)
                    },
                    cache: false,
                    async: true,
                    success: function (data) {
                        layer.msg(data.msg, {icon: 6});
                    }
                });
            });
        });

	})

	//删除属性
    function deleteAttr(obj){
        $(obj).parent().parent().remove();
    }
	</script>
</html>
